import React, { useState } from 'react';
import { Avatar, Dropdown, Menu, Modal, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { selectUser, loginOut } from '../../redux/Slice/userSlice';
import {
  UserOutlined,
  CaretDownOutlined,
  NotificationFilled,
  CloseCircleTwoTone,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import Chat from '../Chat';
import cookies from 'js-cookie';
const Usermenu = () => {
  let user = useSelector(selectUser);
  let navigate = useNavigate();
  const dispatch = useDispatch();
  const LoginOut = () => {
    dispatch(loginOut());
    cookies.remove('SpringSession');
    navigate('/login');
  };
  return (
    <Menu>
      <Menu.Item key={1}>您好！ {user}</Menu.Item>
      <Menu.Item key={2} danger onClick={LoginOut}>
        登出
      </Menu.Item>
    </Menu>
  );
};
export default () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };
  const closeModal = () => {
    setIsModalVisible(false);
  };
  return (
    <>
      <div style={{ float: 'right', marginRight: '20px' }}>
        <Dropdown overlay={<Usermenu></Usermenu>} trigger={['click']} placement="bottomRight" arrow>
          <span>
            <Avatar size={36} icon={<UserOutlined />}></Avatar>
            <CaretDownOutlined />
          </span>
        </Dropdown>
      </div>
      <div style={{ float: 'right', marginRight: '20px', border: '0px' }}>
        <NotificationFilled onClick={showModal} style={{ fontSize: '18px' }} />
      </div>
      <Modal
        width={888}
        style={{ height: 'auto', width: 'auto!important' }}
        title="Basic Modal"
        visible={isModalVisible}
        modalRender={() => (
          <div style={{ pointerEvents: 'auto' }}>
            <CloseCircleTwoTone
              onClick={closeModal}
              style={{
                zIndex: '999',
                fontSize: '24px',
                position: 'absolute',
                right: '0',
                top: '0',
              }}
            />
            <Chat></Chat>
          </div>
        )}
      />
    </>
  );
};
